// $colors: #f1c40f,
// #9b59b6,
// #2980b9,
// #1abc9c,
// #f39c12,
// #b33771;

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        main {
            transform: perspective(900px) rotateY(345deg) rotateX(100deg);
        }
    }
}

main {
    width: 300px;
    height: 150px;
    position: relative;
    transition-duration: 2s;
    transform: perspective(900px);
    transform-style: preserve-3d;

    div {
        position: absolute;
        opacity: .7;

        @for $i from 1 to 5 {
            &:nth-child(#{$i}) {
                width: 300px;
                height: 150px;
                transform-origin: center center -75px;
                transform: rotateX(#{$i * 90}deg);
                // background-color: nth($colors, $i);
            }
        }

        &:nth-child(5) {
            width: 150px;
            height: 150px;
            transform: rotateY(90deg);
            // background-color: nth($colors, 5);
            transform-origin: left;
        }

        &:nth-child(6) {
            width: 150px;
            height: 150px;
            left: 150px;
            transform-origin: right;
            transform: rotateY(-90deg);
            // background-color: nth($colors, 6);
        }


    }

}